<template>
  <ContainerWrapper 
    :designer="designer" :widget="widget" :parent-widget="parentWidget" 
    :parent-list="parentList" :index-of-parent-list="indexOfParentList"
  >
    
    <a-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
            :class="[selected ? 'selected' : '', customClass]">
      <template v-for="(colWidget, colIdx) in widget.cols" :key="colWidget.id">
        
        <!-- <grid-col-widget :widget="colWidget" :designer="designer" :parent-list="widget.cols"
                         :index-of-parent-list="colIdx" :parent-widget="widget"
                         :col-height="widget.options.colHeight"></grid-col-widget> -->
      </template>
    </a-row>
  </ContainerWrapper>
</template>

<script lang="ts" setup name="grid-widget">
import { ref, PropType, computed } from 'vue'
import ContainerWrapper from './ContainerWrapper.vue'
const customClass = ref()
import type { Designer } from '../../type'
const props = defineProps({
  widget: { type: Object, default: {}, required: true},
  parentWidget: { type: Object as PropType<any[]>, required: true },
  parentList: { type: Array, required: true },
  indexOfParentList: { type: Number, required: true },
  designer: { type: Object as PropType<Designer>, required: true },
})
const designer = props.designer

const selected = computed(() => props.widget.id === designer.selectedId)
</script>

<style lang="less" scoped>
</style>
